<template>
  <view class="page">
    <!-- 用户信息 -->
    <view class="top">
      <view class="userinfo" @tap="onLogin" @longpress="onLogin2">
        <view class="icon">
          <image :src="loginResult.pic ? (loginResult.pic.indexOf('http') === -1 ? picDomain + loginResult.pic : loginResult.pic) : '/static/images/mine_user.png'" />
        </view>
        <view class="login" v-if="!isAuthInfo">点击登录</view>
        <view class="message" v-else>
          <view class="nick">{{ loginResult.nickName ? loginResult.nickName : '--' }}</view>
          <!-- <view class="score">积分：{{ loginResult.score }}</view> -->
        </view>
      </view>
      <!-- <image class="setting" src="@/static/images/user_setting.png" @tap="onSetting"></image> -->
    </view>

    <view class="content">
      <!-- 订单状态 -->
      <view class="order">
        <view class="titleBar">
          <text style="font-weight: bold">我的订单</text>
          <view class="more" data-sts="0" @tap="onOrderList">
            <text>查看全部</text>
            <text class="arrow" />
          </view>
        </view>
        <view class="list">
          <view class="items" data-sts="1" @tap="onOrderList">
            <image src="@/static/images/icon/toPay.png" />
            <text>待付款</text>
            <text class="num-badge" v-if="orderAmount.unPay > 0">{{ orderAmount.unPay }}</text>
          </view>
          <view class="items" data-sts="2" @tap="onOrderList">
            <image src="@/static/images/icon/toDelivery.png" />
            <text>待发货</text>
            <text class="num-badge" v-if="orderAmount.payed > 0">{{ orderAmount.payed }}</text>
          </view>
          <view class="items" data-sts="3" @tap="onOrderList">
            <image src="@/static/images/icon/toTake.png" />
            <text>待收货</text>
            <!--   -->
            <text class="num-badge" v-if="orderAmount.consignment > 0">{{ orderAmount.consignment }}</text>
          </view>
          <view class="items" data-sts="5" @tap="onOrderList">
            <image src="@/static/images/icon/toComment.png" />
            <text>已完成</text>
          </view>
        </view>
      </view>

      <view class="collect">
        <view class="item" @tap="onCollect">
          <view v-if="loginResult" class="num">{{ collectionCount ? collectionCount : 0 }}</view>
          <view v-else class="num">--</view>
          <view class="text">我的收藏</view>
        </view>
        <!-- <view class="item" @tap="handleTips">
          <view v-if="loginResult" class="num">0</view>
          <view v-else class="num">--</view>
          <view class="text">我的消息</view>
        </view> -->
        <!-- <view class="item" @tap="onHistory">
          <view v-if="loginResult" class="num">0</view>
          <view v-else class="num">--</view>
          <view class="text">浏览记录</view>
        </view> -->
        <view class="item" @tap="onPoints">
          <view class="num">{{ loginResult.score ? loginResult.score : '--' }}</view>
          <view class="text">我的积分</view>
        </view>
        <!-- <view class="item" @tap="onCoupon">
          <view v-if="loginResult" class="num">0</view>
          <view v-else class="num">--</view>
          <view class="text">我的优惠券</view>
        </view> -->
      </view>

      <view class="menu">
        <!-- <view class="item" @tap="onDistCenter">
          <view class="name">
            <image src="@/static/images/promotion.png" />
            <text>分销中心</text>
          </view>
          <view class="arrow" />
        </view> -->
        <!-- <view class="item" @tap="onCouponCenter">
          <view class="name">
            <image src="@/static/images/user_coupon.png" />
            <text>领券中心</text>
          </view>
          <view class="arrow" />
        </view> -->
        <view class="item" @tap="onAddress">
          <view class="name">
            <image src="@/static/images/user_address.png" />
            <text>收货地址</text>
          </view>
          <view class="arrow" />
        </view>
        <view class="item" @tap="onSetting">
          <view class="name">
            <image src="@/static/images/user_setting.png" />
            <text>设置</text>
          </view>
          <view class="arrow" />
        </view>
        <view class="item" v-if="isAuthInfo" @tap="onLogout">
          <view class="name">
            <image src="@/static/images/user_logout.png" />
            <text>退出登录</text>
          </view>
          <view class="arrow" />
        </view>
      </view>
    </view>
  </view>
  <!--  <uni-popup ref="logoutRef" type="center" :isMaskClick="false">
    <TipsPop tipsText="确定退出登录？" :isShowCancel="true" @popCancel="onCancelPop" @popConfirm="onConfirmPop" />
  </uni-popup> -->
</template>

<script setup>
import TipsPop from '@/components/TipsPop.vue';
const picDomain = import.meta.env.VITE_APP_RESOURCES_URL;

const isAuthInfo = ref(false);
const loginResult = ref('');
const userId = ref('');
const orderAmount = ref('');
const logoutRef = ref();

/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  loginResult.value = uni.getStorageSync('loginResult');
  isAuthInfo.value = !!loginResult.value;
  userId.value = loginResult.value.userId;

  getUserInfo();
  getOrderCount();
});

// 加载订单数字
const getOrderCount = () => {
  if (!isAuthInfo.value) return;
  uni.showLoading();
  http
    .request({
      url: '/p/myOrder/orderCount',
      method: 'GET',
      data: {}
    })
    .then(({ data }) => {
      uni.hideLoading();
      orderAmount.value = data;
    });
  onCollectCount();
};

// 获取用户信息
const getUserInfo = () => {
  if (!userId.value) return;
  http
    .request({
      url: '/p/user/userInfo',
      method: 'GET',
      data: {
        userId: userId.value
      }
    })
    .then(({ data }) => {
      uni.hideLoading();
    });
};

const onSetting = () => {
  uni.showToast({
    title: '设置',
    icon: 'none'
  });
  uni.navigateTo({
    url: '/pages/user/setting/setting'
  });
};

const onDistCenter = () => {
  if (!isAuthInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
  uni.showToast({
    icon: 'none',
    title: '分销中心'
  });
};

const onCouponCenter = () => {
  uni.showToast({
    icon: 'none',
    title: '优惠券列表'
  });
};

const onCoupon = () => {
  if (!isAuthInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
  uni.showToast({
    icon: 'none',
    title: '我的优惠券'
  });
};

const onHistory = () => {
  if (!isAuthInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
};

const onPoints = () => {
  if (!isAuthInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
};

const onAddress = () => {
  if (!isAuthInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url: '/pages/user/address/address'
  });
};

const onOrderList = (e) => {
  if (!isAuthInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
  const sts = e.currentTarget.dataset.sts;
  uni.navigateTo({
    url: '/pages/user/orderList/orderList?sts=' + sts
  });
};

const collectionCount = ref(0);
/**
 * 查询收藏量
 */
const onCollectCount = () => {
  if (!isAuthInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
  uni.showLoading();
  http
    .request({
      url: '/p/user/collection/count',
      method: 'GET',
      data: {}
    })
    .then(({ data }) => {
      uni.hideLoading();
      collectionCount.value = data;
    });
};

const onCollect = () => {
  if (!isAuthInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
  const title = '收藏';
  let url = '/pages/index/productList/productList?sts=5' + '&title=' + title;
  const id = 0;
  if (id) {
    url += '&tagid=' + id;
  }
  uni.navigateTo({
    url
  });
};

/**
 * 去登陆
 */
const onLogin = () => {
  if (isAuthInfo.value) {
    return;
  }
  uni.navigateTo({
    url: '/pages/login/login'
  });
};

//测试
const onLogin2 = () => {
  console.log('长按');
  uni.navigateTo({
    url: '/pages/login/account/account'
  });
};
/**
 * 退出登录
 */
const onLogout = () => {
  // logoutRef.value.open();
  uni.showModal({
    title: '',
    content: '确定退出登录？',
    confirmColor: '#e02e2e',
    showCancel: true,
    success(res) {
      if (res.confirm) {
        console.log('确定');
        onConfirmPop();
      } else if (res.cancel) {
        console.log('取消');
      }
    }
  });
};

const onConfirmPop = () => {
  // logoutRef.value.close();
  http
    .request({
      url: '/logOut',
      method: 'post'
    })
    .then(() => {
      console.log('退出成功');
    })
    .finally(() => {
      uni.showToast({
        title: '退出成功',
        icon: 'none'
      });
      orderAmount.value = '';
      util.removeTabBadge();
      uni.removeStorageSync('loginResult');
      uni.removeStorageSync('token');
      setTimeout(() => {
        // uni.switchTab({
        //   url: '/pages/index/index'
        // });
        uni.reLaunch({
          url: '/pages/login/login'
        });
      }, 1000);
    });
};
const onCancelPop = () => {
  logoutRef.value.close();
};
</script>

<style scoped lang="scss">
// @use './user.scss';
@import './user.scss';
</style>
